<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	</head>
	<body>
		<div class="container">
				<!-- 行元素 -->
			<div class="row">
					<div class="col-md-4" style="background-color: beige;">4</div>
					<div class="col-md-8" style="background-color: blue;">8</div>
			</div>
			
			<!-- 
					栅格网络系统
						1. 列组合
							列总和数不能超12,大于12,则自动换到下一行!
						2. 列偏移
							只需要在列元素添加类名"cold-md-offse-* (其中星号表示要偏移的列组合数),那么具有这个类名的列就会想右偏移"
						3. 列排序
							列排序其实就是改变列的方向, 就是改变左右浮动,并且设置浮动的距离.
							在bootstrap框架的网络系统中是通过添加类名(.col-md-push-*  (右) 和 .col-md-pull-*  (左)) ,其中星号表示移动的列数
						4. 列嵌套
							BootStrap框架的网络系统还支持列的嵌套
							你可以在一个列中添加一个或者多个(row) 容器 然后在这个行容器中插入列.
			 -->
			 
			<!-- 1. 列组合 -->
			<div class="row">
					<div class="col-md-6" style="background-color: beige;">6</div>
					<div class="col-md-6" style="background-color: blue;">6</div>
			</div>
			
			<hr>
			<!-- 列偏移 -->
			<div class="row">
					<div class="col-md-2 col-md-offset-4" style="background-color: red;">2</div>
					<div class="col-md-2" style="background-color: hotpink;">2</div>
					<div class="col-md-2" style="background-color: blue;">2</div>
					<div class="col-md-2" style="background-color: darkblue;">2</div>
			</div>
			
			<hr>
			<!--  列排序-->
			<div class="row">
					<!--  col-md-push-4 向右移动4个位置-->
					<div class="col-md-1 col-md-push-4" style="background-color: red;">1</div>
					<div class="col-md-1" style="background-color: hotpink;">1</div>
					<!-- col-md-pull-2 向左边移动两个位置!-->
					<div class="col-md-1 col-md-pull-2" style="background-color: blue;">1</div>
					<div class="col-md-1" style="background-color: darkblue;">1</div>
			</div>
			
			<hr>
			<!-- 列嵌套 -->
			<div class="row">
					<div class="col-md-6" style="background-color: red;">
						<div class="row">
								<div class="col-md-9" style="background-color: red;">(9)</div>
								<div class="col-md-1" style="background-color: hotpink;">(1)</div>
								<div class="col-md-1" style="background-color: brown;">(1)</div>
								<div class="col-md-1" style="background-color: palegreen;">(1)</div>
						</div>
					</div>
					
					<div class="col-md-6" style="background-color: navajowhite;">6</div>
			</div>
			
			
			
		</div>
	</body>
</html>